<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="form-box">
				<view class="row-wrap">
					<view class="label">手机号码</view>
					<view class="label-right">
						<input name="mobile" class="input" maxlength="11" type="number" placeholder="将通过此手机号联系您" :value="addressData.mobile" />
					</view>
				</view>
				<view class="row-wrap">
					<view class="label">联系人</view>
					<view class="label-right">
						<input name="name" class="input" type="text" placeholder="姓名" :value="addressData.receiver" />
					</view>
				</view>

				<block v-if="locationName != ''">
					<view class="row-wrap">
						<view class="label">地址详情</view>
						<view class="label-right">
							<input name="address" class="input" type="text" placeholder="详细地址" :value="locationDetail" />
						</view>
					</view>
					<view class="row-wrap">
						<view class="label">地址名称</view>
						<view class="label-right">
							<view class="choose-address" @click="chooseAddress">
								<text class="has-address-text">{{locationName}}</text>
								<uni-icons type="arrowright" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="row-wrap">
						<view class="label">地址</view>
						<view class="label-right">
							<view class="choose-address" @click="chooseAddress">
								<text class="choose-address-text">选择收货地址</text>
								<uni-icons type="arrowright" class="icon"></uni-icons>
							</view>
						</view>
					</view>
				</block>


				<view class="row-wrap">
					<view class="label">门牌号码</view>
					<view class="label-right">
						<input name="detail" class="input" type="text" placeholder="如：2幢5单元102室" :value="addressData.detail" />
					</view>
				</view>
			</view>
			<button type="warn" class="save-btn" form-type="submit">保存</button>
			<button type="default" class="save-btn" @click="deleteAddress" wx:if="addressData">删除该地址</button>
			<button type="default" class="cancel-btn" @click="onCancelClick">取消</button>
		</form>
	</view>
</template>

<script>
	import {
		Address
	} from '../../models/address.js'
	const addressModel = new Address()
	export default {
		data() {
			return {
				addressData: {},
				locationName: '',
				locationDetail: '',
				savestatus: 'add'
			}
		},
		methods: {
			chooseAddress() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								that.locationName = res.name
								that.locationDetail = res.address
							}
						})
					},
					fail: function() {
						uni.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: function(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data.authSetting["scope.userLocation"] === true) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															})
															//授权成功之后，再调用chooseLocation选择地方
															uni.getLocation({
																type: 'wgs84',
																success: function(res) {
																	uni.chooseLocation({
																		latitude: res.latitude,
																		longitude: res.longitude,
																		success(res) {
																			that.locationName = res.name
																			that.locationDetail = res.address
																		}
																	})
																},
															})
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'success',
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: function(res) {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'success',
									duration: 1000
								})
							}
						})
					}
				})
			},
			onPhoneBlur() {
				let data = {
					mobile: e.detail.value
				}
				addressModel.checkAddressByMobile(data, (res) => {
					if (res.data != false) {
						this.setData({
							popupShow: true,
							tempAddress: res.data
						})
					}
				})
			},
			onCancelClick() {
				uni.navigateBack({})
			},
			formSubmit(e) {
				let that = this;
				let name = e.detail.value.name
				let mobile = e.detail.value.mobile
				let locationName = this.locationName
				let address = e.detail.value.address
				let detail = e.detail.value.detail

				if (name == "") {
					uni.showModal({
						title: '提示',
						content: '请填写联系人姓名',
						showCancel: false
					})
					return
				}
				if (mobile == "") {
					uni.showModal({
						title: '提示',
						content: '请填写手机号码',
						showCancel: false
					})
					return
				}

				if (detail == "") {
					uni.showModal({
						title: '提示',
						content: '请填写门牌号码或者其他',
						showCancel: false
					})
					return
				}
				let submitData = {}
				let savestatus = this.savestatus
				if (savestatus == 'edit') {
					submitData.id = this.raid
				}
				submitData.name = name
				submitData.mobile = mobile
				submitData.location_name = locationName
				submitData.address = address
				submitData.detail = detail

				uni.showLoading({
					title: '提交中',
				})
				

				if (this.orderId) {
					let orderAddressData = {}
					orderAddressData.id = this.orderId
					orderAddressData.address = submitData
					orderModel.editOrderAddress(orderAddressData, (data) => {
						if (data.code == 0) {
							uni.showModal({
								title: '提示',
								content: data.msg,
								showCancel: false,
								success(res) {
									uni.navigateBack({})
								}
							})
						} else {
							uni.showToast({
								title: data.msg,
								icon: 'none'
							})
						}
					})
				}

				addressModel.setAddress(submitData, (res) => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: res.msg
						})
						uni.hideLoading();
						uni.navigateBack({})
					} else {
						uni.showToast({
							title: res.msg
						})
						uni.hideLoading()
						return
					}
				})
			},
			deleteAddress() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除该收货地址吗？',
					success: function(res) {
						let submitData = {}
						submitData.status = -1
						submitData.id = that.raid
						addressModel.setAddress(submitData, (data) => {
							if (data.code == 0) {
								uni.showToast({
									title: res.msg
								})
								uni.hideLoading();
								uni.navigateBack({})
							} else {
								uni.showToast({
									title: res.msg
								})
								uni.hideLoading()
								return
							}
						})
					}
				})
			}
		},
		onLoad(options) {
			if (options.id) {
				let address = uni.getStorageSync('edit_address')
				this.addressData = address
				this.locationName = address.location_name ? address.location_name : ''
				this.locationDetail = address.address ? address.address : address.province + address.city + address.country +
					address.detail
				this.raid = options.id
				this.savestatus = 'edit'
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		background-color: #f5f5f9;
		justify-content: initial;
	}

	.form-box {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.row-wrap {
		width: 720rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin-left: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		font-size: 28rpx;
	}

	.address {
		width: 720rpx !important;
		margin-left: 30rpx !important;
	}

	.right-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: -570rpx;
	}

	.right-section text {
		margin-left: 20rpx;
	}

	.row-wrap .label {
		width: 160rpx;
		color: #000;
	}

	.row-wrap .label-right {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
	}

	.row-wrap .label-right input {
		height: 100%;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.row-wrap .right-box {
		margin-right: 30rpx;
	}

	.arrow-right {
		width: 15rpx;
		height: 24rpx;
	}

	.choose-address {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}

	.has-address-text {
		color: #333;
	}

	.choose-address-text {
		color: #999;
	}

	.icon {
		margin-right: 20rpx;
	}
</style>
